<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件测试页面</title>
    <meta name="divport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./elementUI/index.css">
    <link rel="stylesheet" href="../style/index.css">
</head>

<body>
    <div id="app">
        <el-button @click="hanlde">导出</el-button>
        <el-upload class="upload-demo" accept=".xlsx" ref="upload" action="" :show-file-list="false"
            :on-change="handleChange" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="商品名称" width="180">
            </el-table-column>
            <el-table-column prop="name" label="规格">
            </el-table-column>
            <el-table-column prop="amount1" label="采购价格">
            </el-table-column>
            <el-table-column prop="amount2" label="销售价格">
            </el-table-column>
            <el-table-column prop="amount3" label="库存数量">
            </el-table-column>
        </el-table>
    </div>
    <script src="../utils/jquery.min.js"></script>
    <script src="../utils/jquery.cookie.js"></script>
    <script src="../utils/vue.min.js"></script>
    <script src="../utils/vuex.min.js"></script>
    <script src="./elementUI/index.js"></script>
    <script src="../utils/utils.js"></script>
    <script src="../utils/compressor.js"></script>
    <script src="../utils/xlsx.full.min.js"></script>
    <script src="../utils/xlsx.core.min.js"></script>
    <script src="./component.js"></script>
    <script src="../config/config.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    data: [],
                    tableData: [{
                        id: '商品1',
                        name: '规格1',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '商品1',
                        name: '规格2',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '商品2',
                        name: '规格1',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '商品2',
                        name: '规格2',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '商品3',
                        name: '规格3',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }]
                }
            },
            computed: {
                Data(){
                    let obj={}
                    this.tableData.forEach((item,index) => {
                        if (obj[item.id]) {
                            obj[item.id].index ++
                        } else {
                            obj[item.id] = {
                                id:index,
                                index:0,
                            }
                        }
                    });
                    this.tableData.forEach((item,index)=>{
                        item
                    })
                },
            },
            methods: {
                getData(){
                    $.ajax({
                    url: `./table.json`,
                    type: 'GET',
                    success: function (res) {
                        console.log();
                    },
                    dataType: "json"
                })
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex === 0 ) {
                        console.log(row);
                        console.log(rowIndex);
                        if (rowIndex % 3 === 0) {
                            return {
                                rowspan: 3,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                },
                hanlde() {
                    const wb = XLSX.utils.book_new();
                    const ws_data = [
                        ["商品内码", "商品名称", "品牌", "品牌内码", "商品京东价格", "商品京东链接", "规格内码", "规格", "规格京东价格", "规格京东链接", "供应商", "供应商编号", "销售价格", "采购价格", "剩余库存", "剩余库存", "上架状态", "游客是否可见"],
                        ["aaaaaaa"]
                    ];
                    const ws = XLSX.utils.aoa_to_sheet(ws_data);
                    // ws['!merges'] = [{
                    //     s: { c: 0, r: 1 },
                    //     e: { c: 0, r: 7 },
                    // }, {
                    //     s: { c: 1, r: 1 },
                    //     e: { c: 1, r: 7 },
                    // }, {
                    //     s: { c: 2, r: 1 },
                    //     e: { c: 2, r: 7 },
                    // }, {
                    //     s: { c: 3, r: 1 },
                    //     e: { c: 3, r: 3 },
                    // }, {
                    //     s: { c: 3, r: 4 },
                    //     e: { c: 3, r: 7 },
                    // }, {
                    //     s: { c: 4, r: 1 },
                    //     e: { c: 4, r: 3 },
                    // }, {
                    //     s: { c: 4, r: 4 },
                    //     e: { c: 4, r: 7 },
                    // }];
                    for (let key in ws) {
                        if (key.indexOf('!') !== 0) {
                            ws[key].s = {
                                alignment: { horizontal: 'center', vertical: 'center' },
                            }
                        }
                    }
                    // ws['!cols'] = [
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' },
                    //     { wpx: 150, horizontal: 'center', vertical: 'center' }
                    // ];

                    console.log(ws);
                    XLSX.utils.book_append_sheet(wb, ws, "对账明细");
                    XLSX.writeFile(wb, "开票导出" + (+new Date()) + ".xlsx");
                },
                handleChange({ raw }) {//导入监听文件
                    const that = this;
                    var reader = new FileReader();
                    reader.readAsBinaryString(raw);
                    reader.onload = function (e) {
                        var data = e.target.result;
                        var wb = XLSX.read(data, {
                            type: 'binary' //以二进制的方式读取
                        });
                        var sheet = wb.Sheets[wb.SheetNames[0]];//sheet0代表excel表格中的第一页
                        var header = XLSX.utils.sheet_to_json(sheet, { header: 1 })[0];//获取
                        var header = XLSX.utils.sheet_to_json(sheet, { header: 2 })[0];//获取
                        var json = XLSX.utils.sheet_to_json(sheet, { startRow: 1 });//利用接口实现转换。
                        console.log(json);
                    }
                },
            },
        })

    </script>
</body>

</html>